<template>
  <div id='temp'>
      <div class='hd'>
      <!--轮播图  -->
      <div class='slider'>
        <slider :imgs="list"></slider>
      
      
       </div>
       <div class='price'>
          <h4>{{info.title}}</h4>
          <p class="line"></p>
          <ul>
            <li>市场价：￥{{info.market_price}} 销售价：<s>￥{{info.sell_price}}</s></li>
            <li class='inputnum'>
                购买数量：
                <inputnum @sendata="getdata" class='num'></inputnum>
                <transition
                    v-on:before-enter="beforeEnter"
                    v-on:enter="enter"
                    v-on:after-enter="afterEnter" >
                    <div v-if="isshow" class="ball"></div>
                </transition>
            </li>
            <li class="shop">
                 <mt-button type="primary" size="small">立即购买</mt-button>
                 <mt-button @click="toshopcar()" type="danger" size="small">加入购物车</mt-button>
            </li>
          </ul>
      </div>
      <div class="param">
          <h6>商品参数：</h6>
          <p class="line"></p>
          <ul>
              <li>商品货号：{{info.goods_no}}</li>
              <li>库存情况：{{info.stock_quantity}}</li>
              <li>上架时间：{{info.add_time}}</li>
          </ul>
      </div>
      <div class="btn">
        <router-link v-bind="{to:'/goods/goodsdesc/'+info.id}">
            <mt-button type="primary" size="large">图文详情</mt-button>
        </router-link>
        <router-link v-bind="{to:'/goods/goodscomments/'+info.id}">
            <mt-button type="danger" size="large">商品评论</mt-button>
      </router-link>
      </div>
    </div> 
 </div>
</template>
<script>
import common from "../../kits/common.js";
import inputnum from "../subcom/inputnumber.vue";
//导入VM对象
import {vm,COUNTSTR}  from "../../kits/vm.js";
//导入localstorage
import {setItem,valueObj} from '../../kits/localstorage.js';
export default {
    components:{
        inputnum,
    },
  data () {
    return {
        id:0,
        list:[],
        info:{},
        inputnumber:1,
        isshow:false
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getImgs();
      this.getinfo();
  },
  methods:{
      //小球动画
      beforeEnter(el){
          
          el.style.transform="translate(0px,0px)";
      },
      enter(el,done){
         el.offsetWidth;
         el.style.transform="translate(60px,366px)";
         done();
      },
      afterEnter(el){
          this.isshow=!this.isshow;
      },
       getImgs(){
                this.$http.get(common.apidomain+"/api/getthumimages/"+this.id).then(function(res){
                    var data=res.body;

                    if(data.status!=0){
                        Toast(data.message);
                        //console.log(data.message);
                        return;
                    }
                    this.list=data.message;
                    
                })
        },
        getinfo(){
            this.$http.get(common.apidomain+"/api/goods/getinfo/"+this.id).then(function(res){
                var data=res.body;

                if(data.status!=0){
                    Toast(data.message);
                    //console.log(data.message);
                    return;
                }
                this.info=data.message[0];
                
            })
        }, 
        getdata(input){
            //获取inputnumber中传入的组件的值
            this.inputnumber=input;
        },
        //加入购物车方法
        toshopcar(){
            //console.log(vm);
            //COUNTSTR对应app.vue中的注册事件的名字
            //1.0 给app.vue发送数据
            vm.$emit(COUNTSTR,this.inputnumber);
            //2.0把数据存储到本地
            valueObj.goodsid=this.id;
            valueObj.count=this.inputnumber;
            setItem(valueObj);
            //3.0实现小球动画，点击购物车让小球显示
            this.isshow=!this.isshow;
        }
  }
}
</script>
<style lang='css' scoped>
.hd{
     
     padding:5px 5px 0 5px;
}
.slider{
    border:1px solid rgba(0,0,0,.4);
    border-radius:5px;
 
}
.price,.param{
    border:1px solid rgba(0,0,0,.3);
    border-radius:5px;
    padding:5px;
    margin:5px 0;
}
.price ul,.param ul{
    list-style: none;
    padding-left:0;
}
.price ul li,.param ul li{
     margin-top:20px;
}

.price s{
    color:red;
}
.price h4{
    color:#0094ff;
}
.line{
    width: 100%;
    padding:0 5px;
    height: 1px;
    background-color: rgba(0,0,0,.2);
}


.mint-button--large{
    margin:5px 0;
}
 .inputnum{
    position:relative;
}
.inputnum .num{
    position:absolute;
    top:0px;
    left:100px;
} 
/*动画小球  */

 .price ul .shop {
    position:relative;
       
} 
.ball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    z-index:100;
    position: absolute;
    top:0;
    left:155px;
    transition: all 0.4s ease;

}
</style>